import React, { Component } from 'react'
import '../assets/style/loginPage_c.less';
import Header from '../components/Header_c';
import FormInput from '../components/FormInput_c';
import FormBtn from '../components/FormBtn_c';
import axios from '../utils/request';

class RegisterPage extends Component {
    constructor(props){
        super(props)
        this.state = {
            username: "",
            password: "",
            code: ""
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleChange2 = this.handleChange2.bind(this)
        this.handleChange3 = this.handleChange3.bind(this)
        this.handleClick = this.handleClick.bind(this)
    }
    handleChange(e){
        this.setState({ username: e.target.value })
    }
    handleChange2(e){
        this.setState({ password: e.target.value })
    }
    handleChange3(e){
        this.setState({ code: e.target.value })
    }
    async handleClick(e){
        e.preventDefault()
        console.log('开始axios请求');
        if(!this.state.username || !this.state.password || !this.state.code) return
        let params = {
            username: this.state.username,
            password: this.state.password,
            code: this.state.code
        }
        console.log(params);
        const res = await axios({
            method: 'post',
            url: "/register",
            data: params
        })
        console.log(res.data.code);
        if(res.data.code == 200){
            this.props.history.push('/login')
        }else{
            alert('注册失败')
        }
        
    }
    render() {
        return (
            <div className="login-page">
                <Header>用户注册</Header>
                <div className="body">
                    <h2>账号密码登录</h2>
                    <form className="login-form">
                        {/* 手机号 */}
                        <FormInput type="text" src="phone.png" value={this.state.username} onChange={this.handleChange}  placeholder="请输入手机号" />
                        {/* 密码 */}
                        <FormInput type="password" src="suo.png" value={this.state.password} onChange={this.handleChange2}  placeholder="请输入密码" />
                        {/* 验证码 */}
                        <FormInput types="code" username={this.state.username} value={this.state.code} onChange={this.handleChange3} placeholder="请输入验证码" />
                        {/* 注册 */}
                        <FormBtn onClick={this.handleClick}>注册</FormBtn>
                    </form>
                </div>
            </div>
        )
    }
}
export default RegisterPage